<template>
  <div class="input-item">
    <div class="label">
      {{props.label}}
    </div>
    <div class="input" >
      <picker :value="minIndex" :range="min" @change="bindMinChange">
        <view class="uni-input">{{min[minIndex]}}</view>
      </picker>
      <div class="next">~</div>
      <picker :value="maxIndex" :range="max" @change="bindMaxChange">
        <view class="uni-input" v-show="maxIndex > minIndex">{{max[maxIndex]}}</view>
      </picker>
    </div>
  </div>


</template>

<script setup lang="ts">
import {onMounted, ref, shallowRef, watch} from "vue";

const props = defineProps({
  label: String,
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])


const min = shallowRef(Array.from(Array(25).keys(), n => (n + 1 ) + 'K'));
const minIndex = ref(0)
const max = shallowRef(Array.from(Array(26).keys(), n => (n + 1 )  + 'K'));
const maxIndex = ref(9)

const bindMinChange = (event) => {
  console.log('event', event)
  minIndex.value = event.detail.value
  maxIndex.value =  Math.min(event.detail.value + 9, max.value.length - 1)
  updateValue()
}
const bindMaxChange = (event) => {
  console.log('event', event)
  maxIndex.value = event.detail.value
  updateValue()
}

const updateValue = () => {
  emit('update:modelValue', [min.value[minIndex.value], max.value[maxIndex.value]].join('~'))
}

watch(() => props.modelValue, () => {
  if(props.modelValue) {
    const valueList = props.modelValue.split('~')
    minIndex.value = min.value.findIndex(item => valueList[0] == item)
    maxIndex.value = max.value.findIndex(item => valueList[1] == item)
  }
  updateValue()
})
</script>

<style scoped lang="scss">
.input-item {
  .label {
    font-size: 30rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 42rpx;
    margin: 0 0 16rpx 0;
    padding: 0 22rpx;
  }
  .input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 72rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 0 38rpx;
    border: 2rpx solid rgba(0,0,0,0.08);
    input {
      flex: 1;
      font-size: 24rpx;
      font-weight: 400;
      color: #0D3333;
    }
  }
}

.picker-view {
  width: 100vw;
  height: 50px;
}
.input {
  display: flex;
  justify-content: space-between;
  padding: 0 200rpx !important;
  .uni-input {
    width: 50%;
  }
}
</style>
